import React from 'react'
import { connect } from 'react-redux'
import { Button } from 'antd'
import actions from '@/store/actions/todo'

@connect(state => state.todo, actions)
class TodoHeader extends React.Component {
    constructor() {
        super()
    }

    // 取得未完成的todo数量
    getUnfinishedCount = () => this.props.todos.filter(i => !i.isComplete).length

    handleAddTodo = () => {
        this.props.addTodo({
            id: +new Date(),
            title: this.todoTitle.value,
            isComplete: false
        })
    }

    handleAddSyncTodo = () => {
        this.props.addTodoSync()
    }

    render() {
        return (
            <div>
                <div>
                    您有
                    {this.getUnfinishedCount()}
                    件事未完成
              </div>
            <div>
                    <label htmlFor="todo">待办项：</label>
                  <input type="text" name="todo" ref={input => (this.todoTitle = input)} />
                  <Button type="default" onClick={this.handleAddTodo}>
                        添加
                    </Button>
                    <Button type="default" onClick={this.handleAddSyncTodo}>
                        异步添加
              </Button>
                </div>
          </div>
        )
    }
}

// 此时的state就是todos:[...]数据
export default TodoHeader
